<template>
	<view class="chat-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar" style="position: fixed;z-index: 100;">
			<view class="nav-left">
				<text class="model-name">{{ botInfo?.name }}</text>
				<view class="model-status online"></view>
			</view>
			<view class="nav-right">
				<button class="function-btn" open-type="share">
					<uni-icons type="redo-filled" size="24" color="#3dc07c"></uni-icons>
				</button>

				<button class="function-btn" @click="clearChat">
					<uni-icons type="trash" size="22" color="#666"></uni-icons>
				</button>
			</view>
		</view>

		<!-- 聊天内容区域 -->
		<scroll-view class="chat-content" scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true"
			:show-scrollbar="false" :enable-passive="true" @scrolltoupper="loadMoreMessages" ref="chatScroll">
			<view class="welcome-card" v-if="messages?.length === 0">
				<image class="ai-avatar" :src="botInfo?.icon_url" mode="aspectFit"></image>
				<!-- {{ botInfo?.onboarding_info.prologue }} -->
				<text class="welcome-title">你好！我是{{ botInfo?.name }}</text>
				<text class="welcome-desc">{{botInfo?.description}}</text>
				<view class="suggestion-list">
					<view class="suggestion-item" v-for="(item, index) in suggestions" :key="index"
						@click="selectSuggestion(item)">
						<uni-icons :type="item.icon" size="16" color="#3dc07c"></uni-icons>
						<text>{{ item.text }}</text>
					</view>
				</view>
			</view>

			<view class="message-list">
				<view v-for="(msg, index) in messages" :key="index" v-show="msg.content"
					:class="['message-item', msg.type === 'user' ? 'message-right' : 'message-left']">
					<!-- <image class="avatar" :src="msg.type === 'user' ? userAvatar : botInfo?.icon_url" mode="aspectFill">
					</image> -->
					<view class="message-content" @longpress="handleLongPress(msg, index)" @click="onPageScroll">
						<zero-markdown-view v-if=" msg.type !== 'user'" class="message-text"
							:class="{ 'user-text': msg.type === 'user' }" :selectable="true"
							:markdown="msg.content"></zero-markdown-view>
						<view v-else class="message-text" :class="{ 'user-text': msg.type === 'user' }">
							{{msg.content}}
						</view>

						<view class="message-time">{{ msg.time }}</view>
					</view>

				</view>
			</view>

			<!-- 加载动画 -->
			<view class="loading-wrapper" v-if="isLoading">
				<view class="typing-indicator">
					<view class="dot"></view>
					<view class="dot"></view>
					<view class="dot"></view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部输入区域 -->
		<view class="input-area">
			<view v-if="is_input" style="display: flex;">
				<view class="input-left-icon">
					<uni-icons type="mic" @click="changeMicAndInput" size="24"></uni-icons>
				</view>
				<!-- 文本输入框 -->
				<view class="input-wrapper" v-if="is_input">
					<input class="input-box" v-model="inputMessage" :adjust-position="true" :show-confirm-bar="false"
						:disabled="!AllowSendMessage" :auto-height="true" :cursor-spacing="20" :maxlength="-1"
						:placeholder="placeholder" @focus="handleFocus" @blur="handleBlur"
						@confirm="sendMessage"></input>
					<view class="send-btn" :class="{ 'active': inputMessage.trim() && AllowSendMessage,
				'disabled': !AllowSendMessage }">
						<uni-icons v-if="is_outputing===false" type="paperplane-filled" size="24"
							:color="inputMessage.trim() ? '#3dc07c' : '#999'" @click="sendMessage">
						</uni-icons>
						<uni-icons v-else @click="stopOutputing()" type="circle-filled" size="24"
							color="#ff0000"></uni-icons>
					</view>
				</view>
			</view>
			<!-- 语音输入 长按 -->
			<view v-else style="display: flex;">
				<view class="input-left-icon">
					<uni-icons type="chat" @click="changeMicAndInput" size="24"></uni-icons>
				</view>
				<view class="mic-input" @longpress="micInput()" @mousedown="micInput" @touchend="minInputEnd()"
					@mouseup="minInputEnd">长按输入</view>
			</view>
		</view>
		<!-- 语音输入弹窗 -->
		<view v-show="is_record">
			<view class="record-box">
				<view class="recording-animation">
					<view class="dot"></view>
					<view class="dot"></view>
					<view class="dot"></view>
				</view>
				<view class="identify-text">正在识别......</view>
				<view class="record-finish">松开完成录音</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		chatApi,
		userApi
	} from '../../utils/api.js'
	import {
		BASE_URL
	} from '../../utils/request.js';
	import {
		jm
	} from '../../utils/tools.js'

	// import {
	// 	io
	// } from 'weapp.socket.io'
	export default {
		data() {
			return {
				inputMessage: '',
				messages: [],
				isLoading: false,
				scrollTop: 0,
				userAvatar: '/static/logo.png',
				aiAvatar: '/static/uni.png',
				suggestions: [],
				botId: null,
				botName: null,
				botInfo: null,
				conversation_id: null,
				chat_id: null,
				eventSource: null,
				placeholder: '请输入您的问题...',
				userInfo: {},
				is_input: true,
				// 语音输入注册插件
				manager: null,
				is_record: false,
				allowHand: false, // 不允许手动上划
				allowOnPageScroll: true,
				is_stream: true, //采用非流式输出
				timeEvent_chat: null,
				is_outputing: false,

			}
		},
		computed: {

			// 流式输出时代码块处理 , 这时候请使用 msgContent 传入组件中

			AllowSendMessage() {
				if (this.userInfo?.vip_type === 'free' && this.userInfo?.free_chat_number <= 0) {
					this.placeholder = '您的免费次数已用完，请升级会员'
					return false;
				}
				return true;
			},

		},
		onBackPress() {
			clearInterval(this.timeEvent_chat);
		},
		onShow() {
			if (this.botId) {
				this.getAgent()
				this.getNewConversation()
			}
			
		},
		onLoad(options) {
			userApi.getUserInfo().then(res => {
				this.userInfo = res.data;
				if (this.userInfo) {
					this.userAvatar = this.userInfo?.wx_avatar || '/static/logo.png';
				}
			})
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline'],

			})
			// 从 options 对象中获取传递的参数
			this.botId = options.id;
			this.botName = options.name;
			if (this.botId) {
				this.getAgent()
				this.getNewConversation()
			} else {
				uni.navigateBack({
					delta: 1
				})
			}


		},

		onShareAppMessage: (op) => {
			const that = this;
			return {
				title: that.botInfo.bot_name,
				imageUrl: that.botInfo.icon_url,
				query: {
					referrer_id: that.userInfo.id
				}
			}
		},
		methods: {
			onPageScroll(e) {
				this.allowHand = true;
			},
			changeMicAndInput() {
				this.is_input = !this.is_input
			},
			micInput() {
				var plugin = requirePlugin("WechatSI")
				this.manager = plugin.getRecordRecognitionManager()

				this.manager.onStart = (res) => {
					// console.log("成功开始录音识别", res)
					if (res.msg == 'Ok') {
						this.is_record = true

					}
				}
				// this.manager.stop();
				this.manager.start({
					lang: "zh_CN"
				})
				this.manager.onError = (res) => {
					// console.error("error msg", res.msg, res.retcode)
					this.manager.stop();
				}
				this.manager.onStop = (res) => {
					// console.log(res);
					if (res.result) {
						this.inputMessage = res.result
						this.is_input = true
					}

				}
			},
			minInputEnd() {
				this.manager.stop();

				this.is_record = false
			},
			async getAgent() {
				const agentRes = await chatApi.getAgentInfo({
					bot_id: this.botId
				})
				if (agentRes.success === false) {
					uni.showModal({
						title: '提示',
						content: '暂无该智能体',
						showCancel: false,
						success() {
							uni.navigateBack({
								delta: 1
							})
						}
					})
				}
				this.botInfo = agentRes.data
				this.suggestions = [];
				this.botInfo?.onboarding_info?.suggested_questions?.forEach((item) => {
					this.suggestions.push({
						text: item,
						icon: ['help', 'info', 'chat'][Math.floor(Math.random() * 3)]
					})
				})
			},
			async getNewConversation() {
				const conversationRes = await chatApi.getConversation({
					bot_id: this.botId
				})
				this.conversation_id = conversationRes.data.conversation_id;
				this.getAllHistory()
			},
			async getAllHistory() {
				const that = this;
				if (this.conversation_id) {
					this.isLoading = true;
					const res = await chatApi.getHistory({
						conversation_id: this.conversation_id
					})
					res.data.data.sort((a, b) => a.updated_at - b.updated_at)
					// 确保数据结构一致
					const formattedMessages = res.data.data.map(message => ({
						type: message.role,
						content: message.content,
						time: this.formatTime(new Date(parseInt(message.updated_at) * 1000)),
						message_id: message.id
					}));
					this.messages = formattedMessages
					this.isLoading = false;
					that.$nextTick(() => {
						that.scrollToBottom();

					});
				}

			},
			sendNewMessage() {

				const that =this;
				const aiMessage = {
					type: 'ai',
					content: '正在深度思考中……',
					time: this.formatTime(new Date()),
					local_chat_id: new Date().getTime(),
				};
				this.messages.push(aiMessage);
				this.is_outputing = true;
				this.allowHand = false;
				const req = wx.request({
					url: BASE_URL + '/api/chat/createAndChat',
					method: 'POST',
					responseType: 'text',
					// enableChunked: true,
					timeout: 18000000,
					header: {
						'Authorization': uni.getStorageSync('token'),
						// 'Accept': 'text/event-stream',
						'Content-Type': 'application/json',
					},
					data: {
						conversation_id: this.conversation_id,
						bot_id: this.botId,
						content: this.inputMessage,
						local_chat_id: aiMessage.local_chat_id,
					},
					success(res) {
						console.log(res.data);
					
						if(res.data.success=== false){
							clearInterval(that.timeEvent_chat);
							that.messages.splice(that.messages.length-1,1);
							that.is_outputing = false;
							uni.showModal({
								title:'提示',
								content:res.data.message
							})
						}
					}
				})

				this.timeEvent_chat = setInterval(async () => {
					const res = await chatApi.getCacheMessage({
						conversation_id: this.conversation_id,
						bot_id: this.botId,
						local_chat_id: aiMessage.local_chat_id,
					})
					if (res.success == false) {
						clearInterval(this.timeEvent_chat);
						this.is_outputing = false;
						return;
					}
					if (!res.data) {
						return;
					}
					let json = res.data.split('\r\n');
					let content = '';
					for (let item of json) {

						if (item) {
							let obj = JSON.parse(item);

							if (obj?.event === 'conversation.chat.created') {
								// this.messages.push(aiMessage);
								this.messages[this.messages.length - 1].message_id = obj?.data?.id;
							}
							if (obj?.event === 'conversation.message.delta') {
								if (this.messages.length >= 1) {
									// if (this.messages[this.messages.length - 1].content === '正在深度思考中……') {
									// 	this.messages[this.messages.length - 1].content = '';
									// }
									if (obj?.data?.content) {
										content += obj?.data
											?.content;

									}
								}

							}
							if (obj?.event === 'conversation.message.completed') {
								if (obj?.data?.content) {

									try {
										let isObj = JSON.parse(obj.data.content)
									} catch (e) {
										content = obj?.data
											?.content;
										clearInterval(this.timeEvent_chat);
										this.is_outputing = false;
										break;
									}

								}

							}
							if (obj?.event === 'conversation.chat.created') {
								if (this.messages.length >= 2) {
									this.messages[this.messages.length - 2].message_id = obj?.data?.id;
								}

								// clearInterval(loadingTime);
							}

							if (obj?.event === 'done') {
								this.$nextTick(() => {
									this.scrollToBottom();
								});
								// return;
							}

						}
					}
					if (content === '') {
						this.messages[this.messages.length - 1].content === '正在深度思考中……'
					} else {
						this.messages[this.messages.length - 1].content = content;
					}
					this.$nextTick(() => {
						if (this.allowHand === false) {
							this.scrollToBottom();
						}
					});
				}, 300)
				return;
				req.onChunkReceived((response) => {
					const arrayBuffer = response.data;
					// console.log(response.data);
					const uint8Array = new Uint8Array(arrayBuffer);
					// let text = uni.arrayBufferToBase64(uint8Array)
					let item = this.Utf8ArrayToStr(uint8Array);
					let json = item.split('\r\n');
					json.forEach((item) => {
						if (item) {
							let obj = JSON.parse(item);

							if (obj?.event === 'conversation.chat.created') {
								// this.messages.push(aiMessage);
								this.messages[this.messages.length - 1].message_id = obj?.data?.id;
							}
							if (obj?.event === 'conversation.message.delta') {
								if (this.messages.length >= 1) {
									if (this.messages[this.messages.length - 1].content === '正在深度思考中……') {
										this.messages[this.messages.length - 1].content = '';
									}
									if (obj?.data?.content) {
										this.messages[this.messages.length - 1].content += obj?.data
											?.content;
										this.$forceUpdate();
									}
								}
								this.$nextTick(() => {
									if (this.allowHand === false) {
										this.scrollToBottom();
									}

									// if (this.isLoading) {
									// 	this.isLoading = false;
									// }
								});
							}
							if (obj?.event === 'conversation.chat.created') {
								if (this.messages.length >= 2) {
									this.messages[this.messages.length - 2].message_id = obj?.data?.id;
								}
								// clearInterval(loadingTime);
							}

							if (obj?.event === 'done') {
								this.$nextTick(() => {
									this.scrollToBottom();
								});
								// return;
							}

						}
					})
				})


			},
			async sendNewMessageNotStream() {
				//非流式
				const aiMessage = {
					type: 'ai',
					content: '正在深度思考中……',
					time: this.formatTime(new Date())
				};
				this.messages.push(aiMessage);
				let timeEvent = null;
				const res = await chatApi.sendMyMessageNotStream({
					conversation_id: this.conversation_id,
					bot_id: this.botId,
					content: this.inputMessage,
					is_stream: this.is_stream,
				})
				this.messages[this.messages.length - 1].message_id = res.data.id;
				console.log(res);
				if (res.success) {
					timeEvent = setInterval(async () => {
						const resDetail = await chatApi.getMessage({
							chat_id: res.data.id,
							conversation_id: this.conversation_id,
						})
						await chatApi.getMessageDetail({
							chat_id: res.data.id,
							conversation_id: this.conversation_id,
						})
						console.log(resDetail);
						if (resDetail.success && resDetail?.data) {
							const content = resDetail?.data[0].content;
							this.messages[this.messages.length - 1].content = content;
							if (resDetail?.data?.length > 1) {
								clearInterval(timeEvent);
							}
						}
					}, 1000)
				}

			},
			Utf8ArrayToStr(array) {
				var out, i, len, c;
				var char2, char3;
				out = "";
				len = array.length;
				i = 0;
				while (i < len) {
					c = array[i++];
					switch (c >> 4) {
						case 0:
						case 1:
						case 2:
						case 3:
						case 4:
						case 5:
						case 6:
						case 7:
							// 0xxxxxxx
							out += String.fromCharCode(c);
							break;
						case 12:
						case 13:
							// 110x xxxx 10xx xxxx
							char2 = array[i++];
							out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
							break;
						case 14:
							// 1110 xxxx 10xx xxxx 10xx xxxx
							char2 = array[i++];
							char3 = array[i++];
							out += String.fromCharCode(((c & 0x0F) << 12) |
								((char2 & 0x3F) << 6) |
								((char3 & 0x3F) << 0));
							break;
					}
				}


				return out;
			},
			stopOutputing() {
				this.is_outputing = false;
				clearInterval(this.timeEvent_chat);
				if (this.messages[this.messages.length - 1].message_id) {
					chatApi.stopChat({
						conversation_id: this.conversation_id,
						chat_id: this.messages[this.messages.length - 1].message_id,

					}).then((res) => {
						console.log(res.data);
					})
				}

			},
			sendMessage() {
				if (!this.inputMessage.trim() || this.isLoading) return;
				if (!this.AllowSendMessage && this.userInfo?.vip_type === 'free') {
					uni.showToast({
						title: '免费用户次数已用尽',
						icon: 'none'
					})
					return
				}

				// 添加用户消息
				const userMessage = {
					type: 'user',
					content: this.inputMessage,
					time: this.formatTime(new Date())
				};
				this.messages.push(userMessage);
				try {
					if (this.is_stream) {
						this.sendNewMessage()
					} else {
						this.sendNewMessageNotStream()
					}
				} catch (e) {
					console.log(e);
				}


				// 清空输入框
				this.inputMessage = '';

				// 等待消息渲染完成后滚动到底部
				this.$nextTick(() => {
					setTimeout(() => {
						this.scrollToBottom();

					});

				})
			},
			selectSuggestion(suggestion) {
				this.inputMessage = suggestion.text;
				this.sendMessage();
			},
			async deleteConversion() {
				const res = await chatApi.delConversation({
					conversation_id: this.conversation_id
				})
			},
			clearChat() {
				uni.showModal({
					title: '提示',
					content: '确定要清空聊天记录吗？',
					success: (res) => {
						if (res.confirm) {
							this.deleteConversion()
							chatApi.createConversation({
								bot_id: this.botId
							}).then(() => {
								this.getNewConversation()
							})
							this.messages = [];
						}
					}
				});
			},

			handleLongPress(message, index) {
				const that = this;
				uni.showActionSheet({
					itemList: ['复制文本', '删除消息'],
					success: (res) => {
						if (res.tapIndex === 0) {
							uni.setClipboardData({
								data: message.content,
								success: (resClip) => {
									uni.showToast({
										title: '复制成功'
									})
								}
							})
						}
						if (res.tapIndex === 1) {
							uni.showModal({
								title: '提示',
								content: '确定要删除这条消息吗？',
								success: (resModal) => {
									if (resModal.confirm) {
										// 用户点击了确认按钮
										that.deleteMessage(index);
									} else if (resModal.cancel) {
										// 用户点击了取消按钮
										console.log('用户点击了取消');
									}
								}
							});
						}
					}
				})

			},
			async deleteMessage(index) {

				// 从数据源中移除该消息
				const res = await chatApi.delMessages({
					conversation_id: this.conversation_id,
					message_id: this.messages[index].message_id
				})
				this.messages.splice(index, 1);
			},

			formatTime(date) {
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				return `${hours}:${minutes}`;
			},
			scrollToBottom() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.chat-content').boundingClientRect();
				query.select('.message-list').boundingClientRect();
				query.exec((res) => {
					if (res[0] && res[1]) {
						this.scrollTop = res[1].height
					}
				});
			},
			loadMoreMessages() {
				// TODO: 实现加载历史消息的逻辑
				// console.log('加载更多消息');
			},
			handleFocus() {
				this.$nextTick(() => {
					setTimeout(() => {
						this.scrollToBottom();
					}, 500)
				});
			},
			handleBlur() {
				// 处理输入框失去焦点的逻辑
			},
			toggleVoiceInput() {
				// 实现语音输入的逻辑
				// console.log('切换到语音输入');

			}
		}
	}
</script>

<style>
	/* #ifdef MP-WEIXIN */
	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}

	::v-deep ::-webkit-scrollbar {
		/* 滚动条整体样式 */
		display: block !important;
		width: 7rpx;
	}

	::v-deep ::-webkit-scrollbar-thumb {
		/* 滚动条里面小方块 */
		border-radius: 5rpx !important;
		box-shadow: inset 0 0 1rpx rgba(0, 0, 0, 0.2) !important;
		background-color: #CCCCCC !important;
	}

	/* #endif */
	.chat-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
	}

	.nav-bar {

		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(10px);
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		top: 0;
		width: 100%;
	}

	.nav-left {
		margin: 20rpx 30rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.model-name {
		font-size: 32rpx;
		font-weight: 500;
	}

	.model-status {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
	}

	.model-status.online {
		background-color: #3dc07c;
	}

	.nav-right {
		margin: 20rpx 30rpx;
		display: flex;
		gap: 16rpx;
	}

	.function-btn {
		background: none;
		border: none;
		padding: 16rpx;
		margin: 0;
		line-height: 1;
	}

	.chat-content {
		flex: 1;
		padding: 20rpx 0;
		overflow-y: auto;
		width: 95%;
		margin-left: 2.5%;
		margin-top: 110rpx;


	}

	.welcome-card {
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		margin: 20rpx 0;
		text-align: center;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.ai-avatar {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 20rpx;
	}

	.welcome-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
		display: block;
	}

	.welcome-desc {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 40rpx;
		display: block;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}

	.suggestion-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		justify-content: center;
	}

	.suggestion-item {
		background: rgba(61, 192, 124, 0.1);
		padding: 16rpx 24rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #3dc07c;
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.message-list {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.message-item {
		display: flex;
		gap: 20rpx;
		max-width: 100%;
	}

	.message-right {
		flex-direction: row-reverse;
		align-self: flex-end;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.message-content {
		display: flex;
		flex-direction: column;
	}

	.message-text {
		/* padding: 5rpx 5rpx; */
		border-radius: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		user-select: text;
		background: #ffffff;
	}

	.user-text {
		background: #3dc07c;
		color: #000000;
		box-shadow: 0 2rpx 8rpx rgba(61, 192, 124, 0.2);
		padding: 15rpx 20rpx;
	}

	.message-time {
		font-size: 24rpx;
		color: #999;
		margin-top: 8rpx;
		align-self: flex-end;
	}

	.loading-wrapper {
		display: flex;
		justify-content: center;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 20rpx;
		height: 230rpx;
		width: 300rpx;
	}

	.typing-indicator {
		display: flex;
		margin-bottom: 20rpx;
		justify-content: center;
		align-items: center;
		gap: 8rpx;
	}

	.dot {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background: #3dc07c;
		animation: typing 1s infinite ease-in-out;
	}

	.dot:nth-child(1) {
		animation-delay: 0.2s;
	}

	.dot:nth-child(2) {
		animation-delay: 0.3s;
	}

	.dot:nth-child(3) {
		animation-delay: 0.4s;
	}

	@keyframes typing {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-10rpx);
		}
	}

	.mic-input {
		background: #f0f0f0;
		border: 1px solid rgba(0, 0, 0, 0.08);
		border-radius: 36rpx;
		padding: 10rpx 20rpx;
		font-size: 28rpx;
		font-weight: 600;
		min-height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		width: 100%;
	}

	.record-box {
		position: absolute;
		top: 40%;
		left: 20%;
		width: 60%;
		height: 250rpx;
		background-color: #fff;
		border-radius: 36rpx;
		text-align: center;
		padding: 10rpx 0;
		box-sizing: border-box;
	}

	/* 定义动画 */
	@keyframes bounce {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-10px);
			/* 上下移动的距离可以根据需要调整 */
		}
	}

	/* 应用动画到每个点 */
	.dot {
		width: 10px;
		height: 10px;
		background-color: green;
		border-radius: 50%;
		display: inline-block;
		margin-right: 10px;
		margin-top: 40rpx;
		animation: bounce 1s ease-in-out infinite;
	}

	/* 为每个点设置不同的延迟时间以实现交错效果 */
	.dot:nth-child(1) {
		animation-delay: 0s;
	}

	.dot:nth-child(2) {
		animation-delay: 0.3s;
	}

	.dot:nth-child(3) {
		animation-delay: 0.6s;
	}

	.identify-text {
		margin: 20rpx 0;
	}

	.record-finish {
		color: #868686;
		margin: 20rpx 0;
	}

	.input-area {
		padding: 20rpx;
		background: #fff;
		border-top: 1rpx solid #eee;
	}

	.input-left-icon {
		margin-top: 20rpx;
		padding: 0 10rpx;

	}

	.input-wrapper {
		display: flex;
		align-items: flex-end;
		gap: 20rpx;
		background: #fff;
		border: 1px solid rgba(0, 0, 0, 0.08);
		border-radius: 36rpx;
		padding: 10rpx 10rpx;
		width: 100%;
	}

	.input-box {
		flex: 1;
		/* min-height: 40rpx; */
		/* height: 72rpx; */
		max-height: 100rpx;
		font-size: 28rpx;
		line-height: 50rpx;
		background: transparent;
		padding: 10rpx 20rpx;
	}

	.send-btn {
		padding: 10rpx;
		opacity: 0.6;
		transition: all 0.3s;
	}

	.send-btn.active {
		opacity: 1;
	}

	.send-btn.disabled {
		opacity: 0.4 !important;
		pointer-events: none;
	}

	.send-btn.disabled uni-icons {
		color: #999 !important;
	}
</style>